<template>
	<view>
		<view class="detail_header_title">
			单号-{{Detail_code}}
			<!-- <image  src="../../../static/changeIcon.png" @tap="Switchstyles()" ></image> -->
		</view>
		<scroll-view scroll-x class="detail_body">
			<!-- 表格形式 -->
			<view class="orderList" :style="{height: orderListHeight + 'px'}" v-show="Switchstyle==1">
				<view class="orderNav" :style="{width:tdAllWidth+'px'}">
					<text :style="{width:tdWidth[0]+'px'}">序号</text>
					<text :style="{width:tdWidth[1]+'px'}">商品名称</text>
					<text :style="{width:tdWidth[2]+'px'}">编号</text>
					<text :style="{width:tdWidth[3]+'px'}">规格</text>
					<text :style="{width:tdWidth[4]+'px'}">单位</text>
					<text :style="{width:tdWidth[5]+'px'}">仓库</text>
					<text :style="{width:tdWidth[6]+'px'}">批号</text>
					<text :style="{width:tdWidth[7]+'px'}">生产日期</text>
					<text :style="{width:tdWidth[8]+'px'}">到期日期</text>
					<text :style="{width:tdWidth[9]+'px'}">单价</text>
					<text :style="{width:tdWidth[10]+'px'}">折扣</text>
					<text :style="{width:tdWidth[11]+'px'}">金额</text>
					<text :style="{width:tdWidth[12]+'px'}">数量</text>
					<text :style="{width:tdWidth[13]+'px'}">备注</text>
				</view>
				<view class="orderLi" :style="{height:orderLiHeight +'px',width:tdAllWidth+'px'}">
					<view class="orderItem" v-for="(item,index) in Detail_info" :class="[{'background':!(index%2==0) && Switchstyle==1}]"
					 :key="index" @tap="checktr(index)">
						<view :style="{width:tdWidth[0]+'px'}">{{index+1}}</view>
						<view :style="{width:tdWidth[1]+'px'}">{{item.GoodsName}}</view>
						<view :style="{width:tdWidth[2]+'px'}">{{item.GoodsCode}}</view>
						<view :style="{width:tdWidth[3]+'px'}">{{item.Spec}}</view>
						<view :style="{width:tdWidth[4]+'px'}">{{item.UnitName}}</view>
						<view :style="{width:tdWidth[5]+'px'}">{{item.stockName}}</view>
						<view :style="{width:tdWidth[6]+'px'}">{{item.BatchNo || ""}}</view>
						<view :style="{width:tdWidth[7]+'px'}">{{timesubstr(item.ProductionDate)}}</view>
						<view :style="{width:tdWidth[8]+'px'}">{{timesubstr(item.validityDate)}}</view>
						<view :style="{width:tdWidth[9]+'px'}">{{toFix(item.Price)}}</view>
						<view :style="{width:tdWidth[10]+'px'}">{{item.Discount}}</view>
						<view :style="{width:tdWidth[11]+'px'}">{{toFix(item.Amount)}}</view>
						<view :style="{width:tdWidth[12]+'px'}">{{toFix(item.Qty)}}</view>
						<view :style="{width:tdWidth[13]+'px'}">{{item.Remark}}</view>
					</view>
				</view>
			</view>
			<!-- <view class="Detail_table" v-show="Switchstyle==1" style="background-color: #FFFFFF;">
				<scroll-view scroll-x style="width: 1650px;">
					<table border="1" class="Detail_table_list" v-if='BillType==11||BillType==12'>
						<tr class="trtdpadd">
							<th nowrap="nowrap">序号</th>
							<th nowrap="nowrap">单据编号</th>
							<th nowrap="nowrap">单据总金额</th>
							<th nowrap="nowrap">已结算金额</th>
							<th nowrap="nowrap">未结算金额</th>
							<th nowrap="nowrap">本次结算额</th>
						</tr>
						<tr v-for="(item,index) in Detail_info" :key="item.id" class="trtdpadd">
							<td> {{index+1}}</td>
							<td>{{item.BillNo}}</td>
							<td>{{item.Amount}}</td>
							<td>{{item.pamount}}</td>
							<td>{{item.Total}}</td>
							<td>{{item.PayTotal}}</td>
						</tr>
					</table>
					<table border="1" class="Detail_table_list" v-else>
						<tr class="trtdpadd">
							<th nowrap="nowrap">序号</th>
							<th nowrap="nowrap">商品名称</th>
							<th nowrap="nowrap">编号</th>
							<th nowrap="nowrap">规格</th>
							<th nowrap="nowrap">单位</th>
							<th nowrap="nowrap">仓库</th>
							<th nowrap="nowrap">批号</th>
							<th nowrap="nowrap">生产日期</th>
							<th nowrap="nowrap">到期日期</th>
							<th nowrap="nowrap">单价</th>
							<th nowrap="nowrap">折扣</th>
							<th nowrap="nowrap">金额</th>
							<th nowrap="nowrap">数量</th>
							<th nowrap="nowrap">备注</th>
						</tr>
						<tr v-for="(item,index) in Detail_info" :key="item.id" class="trtdpadd">
							<td> {{index+1}}</td>
							<td>{{item.GoodsName}}</td>
							<td>{{item.GoodsCode}}</td>
							<td>{{item.Spec}}</td>
							<td>{{item.UnitName}}</td>
							<td>{{item.stockName}}</td>
							<td>{{item.BatchNo}}</td>
							<td>{{timesubstr(item.ProductionDate)}}</td>
							<td>{{timesubstr(item.validityDate)}}</td>
							<td>{{toFix(item.Price)}}</td>
							<td>{{item.Discount}}</td>
							<td>{{toFix(item.Amount)}}</td>
							<td>{{toFix(item.Qty)}}</td>
							<td>{{item.remark}}</td>
						</tr>
					</table>
				</scroll-view>
			</view> -->
			<!-- 列表形式 -->
			<scroll-view scroll-y style="overflow-y: scroll;height: 82%;padding-bottom: 60px;" v-show="Switchstyle==2">
				<!-- :class="['user_list',{'user_list_success':index == checklist}]" -->
				<block v-if="BillType==11||BillType==12">
					<view v-for="(item,index) in Detail_info" :class="['item_list',{'item_table':index == unfold}] " :key="item.id">
						<p>单据编号：{{item.BillNo}}</p>
						<p>单据总金额：{{item.Amount}} </p>
						<p>未结算金额：{{item.Total}}</p>
						<p>已结算金额：{{item.pamount}}</p>
						<!-- <p>生产日期：{{timesubstr(item.ProductionDate)}} <span style="margin-left: 15px;">到期日期：{{timesubstr(item.validityDate)}}</span></p> -->
						<p>本次结算额：{{toFix(item.PayTotal)}} </p>
						<div class="radius" @tap="unfolds(index)">
							<div class="d3" v-if="index != unfold"></div>
							<div class="d4" v-else></div>
						</div>
					</view>
				</block>
				<block v-else>
					<view v-for="(item,index) in Detail_info" :class="['item_list',{'item_table':index == unfold}] " :key="item.id">
						<p>商品名称：{{item.GoodsName}}</p>
						<p>编号：{{item.GoodsCode}} <span style="margin-left: 15px;">规格：{{item.Spec}}</span></p>
						<p>单位：{{item.UnitName}}<span style="margin-left: 15px;">仓库：{{item.stockName}}</span></p>
						<p>批号：{{item.BatchNo}}</p>
						<p>生产日期：{{timesubstr(item.ProductionDate)}} <span style="margin-left: 15px;">到期日期：{{timesubstr(item.validityDate)}}</span></p>
						<p>单价：{{toFix(item.Price)}} <span style="margin-left: 15px;">折扣：{{item.Discount}}</span></p>
						<p>金额：{{toFix(item.Amount)}}<span style="margin-left: 15px;">数量：{{toFix(item.Qty)}}</span></p>
						<p>备注：{{item.Remark}}</p>
						<div class="radius" @tap="unfolds(index)">
							<div class="d3" v-if="index != unfold"></div>
							<div class="d4" v-else></div>
						</div>
					</view>
				</block>
			</scroll-view>
		</scroll-view>
		<view class="Detail_footer">
			<view class="Detail_sum">总行数:{{Detail_length}}
				<block v-if='BillType!=11&&BillType!=12'>总数量:{{Detail_sum}} </block>
				总金额:{{Detail_money}}
			</view>
			<view class="btnall">
				<!-- <view class="qiehuan" @tap="Switchstyles()">切换风格</view> -->
				<view class="btn_back" @tap="back">返回上页</view>
				<!-- <view class="btn_back" @tap="change">修改单据</view> -->
			</view>

		</view>
	</view>
</template>

<script>
	import * as ApiBb from '@/syApis/sygetOrder/apis.js';
	export default {
		data() {
			return {
				Detail_info: [], //商品明细数据
				Detail_length: 0, //商品明细总行数
				Detail_sum: 0, //商品明细总数量
				Detail_money: 0, //商品明细总金额
				Detail_code: '', //商品明细单号
				Switchstyle: 2, //明细风格切换
				unfold: -1, // 展开
				BillType: "",
				NowOrder: {}, //当条数据
				orderListHeight: 300,
				orderLiHeight: 260,
				orderList: [],
				tdWidth: [50, 60, 125, 125, 125, 125, 125, 125, 125, 125, 125, 125, 125, 125],
				// tdWidth1: [50, 60, 125, 125, 125, 125],
			}
		},
		onLoad: function(options) {
			this.Detail_code = options.BillNo; //明细单号
			let detailid = options.id
			this.BillType = options.BillType;
			console.log('新的页面打印')
			console.log(options)
			// 采购入库单明细
			if (this.BillType == 11 || this.BillType == 12 || this.BillType == 18) {
				this.selectPayDetail(detailid);
				//this.getPayOrder(detailid);
			} else {
				this.selectDetail(detailid) //初始化查询明细
				//this.getThisOrder(detailid);
			}

		},
		//页面加载完成获取高度
		onReady() {
			var that = this
			uni.getSystemInfo({
				success: function(res) { // res - 各种参数
					var headerheight = 0;
					var footerheight = 0;
					let header = uni.createSelectorQuery().select(".detail_header_title");
					header.boundingClientRect(function(data) { //data - 各种参数
						// 　　　  　console.log("元素的高度"+data.height)  // 获取元素宽度
						console.log(data)
						headerheight = data.height
						// that.orderListHeight = res.windowHeight - data.height;
						// that.orderLiHeight = (res.windowHeight - data.height) - 40;

					}).exec()
					let footer = uni.createSelectorQuery().select(".Detail_footer");
					footer.boundingClientRect(function(data) { //data - 各种参数
						// 　　　  　console.log("元素的高度"+data.height)  // 获取元素宽度
						console.log(data)
						footerheight = data.height
						// that.orderListHeight = res.windowHeight - data.height;
						// that.orderLiHeight = (res.windowHeight - data.height) - 40;

					}).exec()
					//表格高度
					that.orderListHeight = res.windowHeight - (headerheight + footerheight)
					// 表格内容高度
					that.orderLiHeight = res.windowHeight - (headerheight + footerheight) - 10


				},

			});
		},
		computed: {
			tdAllWidth() {
				var tdAllWidth = 0;

				this.tdWidth.forEach(item => {
					tdAllWidth += parseFloat(item);
				});
				tdAllWidth += this.tdWidth.length - 1;
				return tdAllWidth;
			}
		},
		methods: {
			//获取当条数据
			getThisOrder(BillID) {
				let data = {
					BillType: this.BillType,
					Filter: "BillID=" + BillID
				}
				var that = this;
				ApiBb.SelectBillMaster(data, function(res) {
					if (res.state) {
						if (res.data.ErrorMsg == "获取登录信息失败") {
							ApiBb.showTip("登录超时");
						} else if (res.data.ErrorMsg != "") {
							ApiBb.showTip(res.data.ErrorMsg);
						} else if (res.data.TipsMsg == "OK" && res.data.ResultMsg == "") {
							ApiBb.showTip("查无数据");
						} else {

							res.data.ResultMsg.forEach((item, index) => {
								res.data.ResultMsg[index].UpdateTime = "";
							});
							that.NowOrder = res.data.ResultMsg[0];
						}
					} else {
						ApiBb.showTip("服务器错误!");
					}
				});

			},
			//获取当条数据
			getPayOrder(BillID) {
				let data = {
					BillType: this.BillType,
					Filter: "PayID=" + BillID
				}
				var that = this;
				ApiBb.SelectBillPay(data, function(res) {
					if (res.state) {
						if (res.data.ErrorMsg == "获取登录信息失败") {
							ApiBb.showTip("登录超时");
						} else if (res.data.ErrorMsg != "") {
							ApiBb.showTip(res.data.ErrorMsg);
						} else if (res.data.TipsMsg == "OK" && res.data.ResultMsg == "") {
							ApiBb.showTip("查无数据");
						} else {

							res.data.ResultMsg.forEach((item, index) => {
								res.data.ResultMsg[index].UpdateTime = "";
							});
							that.NowOrder = res.data.ResultMsg[0];
						}
					} else {
						ApiBb.showTip("服务器错误!");
					}
				});

			},
			//修改单据
			change() {
				let BillName = this.getBillName(this.BillType);
				if (this.BillType == '7') {
					uni.navigateTo({
						url: "../../add-order-allot/add-cgorder-allot?BillName=" + BillName + "&oldOrder=" + JSON.stringify(this.NowOrder) +
							"&type=1"
					})
				} else if (this.BillType == 11 || this.BillType == 12 || this.BillType == 18) {
					uni.navigateTo({
						url: "../../add-order-gathering/add-order-gathering?BillName=" + BillName + "&oldOrder=" + JSON.stringify(this.NowOrder) +
							"&type=1"
					})
				} else {
					uni.navigateTo({
						url: "../../add-order-rk-ck/add-cgorder-rk-ck?BillName=" + BillName + "&oldOrder=" + JSON.stringify(this.NowOrder) +
							"&type=1"
					})
				}
			},
			//获取单据名称
			getBillName(billtype) {
				switch (billtype) {
					case "2":
						return "采购入库单";
					case "3":
						return "采购退货单";
					case "5":
						return "销售出库单";
					case "6":
						return "销售出库单";
					case "7":
						return "调拨单";
					case "8":
						return "其他入库单";
					case "9":
						return "其他出库单";
					case "11":
						return "收款单";
					case "12":
						return "付款单";
					case "18":
						return "会员充值";
				}
			},
			onNavigationBarButtonTap(e) {
				const index = e.index;
				console.log(index);
				if (index === 0) {
					this.Switchstyles();
				} else if (index === 1) {

				}
			},
			// 查看明细
			selectDetail: function(e) {
				var that = this;
				let ClientID = uni.getStorageSync("UserCode");
				let CreateName = uni.getStorageSync("UserName");
				let Detailid = e;
				let data = {
					BillType: this.BillType,
					Database: 'FastApp',
					BillID: Detailid
				};
				ApiBb.SelectBillDetail(data, function(res) {
					if (res.state) {
						console.log(res)
						if (res.data.ErrorMsg == "获取登录信息失败") {
							ApiBb.showTip("登录超时");
						} else if (res.data.ErrorMsg != "") {
							ApiBb.showTip(res.data.ErrorMsg);
						} else {
							console.log(res);
							// Detail_length:0,//商品明细总行数
							// Detail_sum:0,//商品明细总数量
							// Detail_money:0,//商品明细总金额
							// console.log('这是长度')
							console.log(res.data.ResultMsg.length)
							that.Detail_info = res.data.ResultMsg;
							let money = 0;
							let sum = 0;
							for (let i in res.data.ResultMsg) {
								money += parseFloat(res.data.ResultMsg[i]['Amount']) //总金额
								sum += parseFloat(res.data.ResultMsg[i]['Qty']) //总数量
							}
							that.Detail_length = res.data.ResultMsg.length;
							that.Detail_sum = sum.toFixed(2);
							that.Detail_money = money.toFixed(2);
							// that.Detail_code = that.tableList[e]['BillNo']
							// price.toFixed(2);
							console.log('这是总金额')
							console.log(money.toFixed(2))
							console.log('这是总数量')
							console.log(sum.toFixed(2))
						}
					} else {
						ApiBb.showTip("服务器错误!");
					}
				});
				console.log(e)
			},
			// 查看收付款单明细
			selectPayDetail: function(e) {
				var that = this;
				let ClientID = uni.getStorageSync("UserCode");
				let CreateName = uni.getStorageSync("UserName");
				let Detailid = e;
				let data = {
					BillType: this.BillType,
					Database: 'FastApp',
					BillID: Detailid
				};
				ApiBb.SelectBillPayDetail(data, function(res) {
					if (res.state) {
						console.log(res)
						if (res.data.ErrorMsg == "获取登录信息失败") {
							ApiBb.showTip("登录超时");
						} else if (res.data.ErrorMsg != "") {
							ApiBb.showTip(res.data.ErrorMsg);
						} else {
							// Detail_length:0,//商品明细总行数
							// Detail_sum:0,//商品明细总数量
							// Detail_money:0,//商品明细总金额
							console.log('这是长度')
							console.log(res.data.ResultMsg.length)
							that.Detail_info = res.data.ResultMsg;
							let money = 0;
							let sum = 0;
							for (let i in res.data.ResultMsg) {
								money += parseFloat(res.data.ResultMsg[i]['Amount']) //总金额
								sum += parseFloat(res.data.ResultMsg[i]['Qty']) //总数量
							}
							that.Detail_length = res.data.ResultMsg.length;
							that.Detail_sum = sum.toFixed(2);
							that.Detail_money = money.toFixed(2);
							// that.Detail_code = that.tableList[e]['BillNo']
							// price.toFixed(2);
							console.log('这是总金额')
							console.log(money.toFixed(2))
							console.log('这是总数量')
							console.log(sum.toFixed(2))
						}
					} else {
						ApiBb.showTip("服务器错误!");
					}
				});
				console.log(e)
			},
			// 日期截取
			timesubstr: function(e) {
				if (e == "" || typeof e == "undefined") {
					return "";
				}
				return e.substring(0, 10)
			},
			//保留两位小数
			toFix: function(evt) {
				if (evt == "" || evt == undefined) {
					return evt
				}
				evt = parseFloat(evt);
				return evt.toFixed(2) //此处2为保留两位小数
			},
			//是否展开
			unfolds: function(e) {
				if (this.unfold == e) {
					this.unfold = -1
				} else {
					this.unfold = e
				}
			},
			//返回上一页
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			//切换风格
			Switchstyles: function() {
				this.Switchstyle = this.Switchstyle == 1 ? 2 : 1
			},
		}
	}
</script>

<style lang="scss">
	@import url("selectdetail.css");

	/* page {
		background-color: #EEEEEE;
		padding-bottom: 0upx;
		height: 100%;
	} */
	//表格单据
	.orderList {
		width: 100%;
		overflow: auto;
		box-sizing: border-box;

		text {
			float: left;
			text-align: center;
			box-sizing: border-box;
			height: 40px;
			line-height: 40px;
			border-right: 1px solid #CCC;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;

			&:last-child {
				border: none;
			}
		}

		.orderNav {
			height: 40px;
			line-height: 40px;
			box-sizing: border-box;
			overflow: hidden;
			border-top: 1px solid #CCC;
			border-left: 1px solid #FFF;
			background: #FFF;

		}

		.orderLi {

			background: #ebebeb;
			overflow: auto;

			.orderItem {
				height: 40px;
				line-height: 40px;
				width: 100%;
				border: 1px solid #ebebeb;
				box-sizing: border-box;
				display: table;
				border-bottom: 1px solid #CCCCCC;

				view {
					display: inline-block;
					height: 100%;
					line-height: 35px;
					float: left;
					text-align: center;
					border-right: 1px solid #CCC;
					box-sizing: border-box;
					padding-top: 5upx;
					padding-bottom: 5upx;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;

					image {
						width: 60px;
						margin: auto;
						display: table;
					}

					&:last-child {
						border: none;
					}

				}
			}
		}

		.allPrice {
			@extend .orderNav;
			background: rgba(124, 170, 216, 1);
			color: #FFF;
		}

		.background {
			background-color: #fff;
		}
	}
</style>
